<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        /* 1，定义动画 */
        @keyframes move {
            /* 开始状态 */
            0% {
                transform: translateX(0px);
            }
            /* 结束状态 */
            100% {
                transform: translateX(1000px);
            }
        }
        /* 使用动画 */
        .anima {
            width: 200px;
            height: 200px;
            background-color: pink;
            animation-name: move;
            animation-duration: 2s;
        }

        /* ******************************************************* */
        @keyframes seq {
            0% {
                transform: translate(0, 0);
            }
            25% {
                transform: translate(1000px, 0);
            }
            50% {
                transform: translate(1000px, 1000px);
            }
            75% {
                transform: translate(0px, 1000px);
            }
            100% {
                transform: translate(0, 0);
            }
        }
        .seq {
            width: 200px;
            height: 200px;
            background-color: blue;
            animation-name: seq;
            animation-duration: 4s;
        }
    </style>
</head>
<body>
    <!-- 
        5.动画

        动画( animation )是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
        相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。


        5.1动画的基本使用

        制作动画分为两步:

        1．先定义动画
        2．再使用（调用）动画

        1.用keyframes定义动画（类似定义类选择器)

        @keyframes 动画名称 {
            0% {
                width: 100px;
            }
            100% {
                width: 200px;
            }
        }


        2.元素使用动画
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
            margin: 100px auto;
            /*调用动画*/
            animation-name:动画名称;
            /*持续时间*/ 
            animation-duration:持续时间;
        }

     -->
     <div class="anima"></div>

     <!-- 
        动画序列

        0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
        在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
        动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
        请用百分比来规定变化发生的时间，或用关键词"from"和"to”，等同于0%和100%。

      -->
      <div class="seq"></div>

      <!-- 
        5.2动画常用属性

        属性                        描述
        @keyframes                 规定动画。
        animation                  所有动画属性的简写属性，除了animation-play-state属性。
        animation-name             规定@keyframes动画的名称。（必须的)
        animation-duration         规定动画完成—个周期所花费的秒或毫秒，默认是0。（必须的)
        animation-timing-function  规定动画的速度曲线，默认是“ease" .
        animation-delay            规定动画何时开始，默认是0。
        animation-iteration-count  规定动画被播放的次数，默认是1，还有infinite
        animation-direction        规定动画是否在下一周期逆向播放，默认是“normal ", 反方向为：alternate
        animation-play-state       规定动画是运行还是暂停。默认是"running",还有"paused"
        animation-fill-mode        规定动画结束后状态，保持结束时的状态用forwards,回到起始状态用backwards
       -->


       <!-- 
        5.3动画简写属性

        animation :动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向动画 起始或者结束的状态

        animation: myfirst 5s linear 2s infinite alternate;


        简写属性里面不包含animation-play-state
        暂停动画: animation-play-state: puased;
        经常和鼠标经过等其他配合使用想要动画走回来，而不是直接跳回来: animation-direction : alternate
        盒子动画结束后，停在结束位置: animation-fill-mode : forwards
        -->

        <!-- 
            5.4速度曲线细节
            animation-timing-function :规定动画的速度曲线，默认是“ease"

            值                描述
            linear            动画从头到尾的速度是相同的。匀速
            ease              默认。动画以低速开始，然后加快，在结束前变慢。
            ease-in           动画以低速开始。
            ease-out          动画以低速结束。
            ease-in-out       动画以低速开始和结束。
            steps()           指定了时间函数中的间隔数量(步长)

         -->
</body>
</html>